<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<!--
	<ui:define name="content">

		<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

-->
<h:head>
	<style>
.align_top {
	vertical-align: top;
}

.letra {
	font: italic;
	font-size: xx-large;
}
.ui-selectonemenu{
     width: 100% !important;
}
.ui-selectonemenu-label{
     width: 100% !important;
}
</style>
</h:head>
<body>
	<h:form id="form" enctype="multipart/form-data">
		<p:wizard style="width:60%" nextLabel="Siguiente" backLabel="Atrás">


			<p:tab id="usuario" title="Nombre">
				<p:panel header="Nombre">
					<p:messages />
					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="label, value">
						<h:outputText value="Nombre del Salón:" />
						<p:inputText required="false" />
					</h:panelGrid>
					<br />
					<p:separator />
					<br />
					<h:outputText value="Fotos" styleClass="letra" />
					<br />
					<h:outputText
						value="Seleccione las fotos del salón. Tambien las puede arrastrar al cuadro." />
					<br />
					<br />
					<p:fileUpload mode="advanced" dragDropSupport="true"
						label="Seleccionar" uploadLabel="Subir" cancelLabel="Cancelar"
						multiple="true" update="messages" sizeLimit="10000000"
						allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

					<p:growl id="messages" showDetail="true" />
				</p:panel>
			</p:tab>

			<p:tab id="domicilio" title="Domicilio y Teléfono">
				<p:panel header="Domicilio y Teléfono">
					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="align_top, align_top">

						<p:fieldset legend="Domicilio" toggleable="true" toggleSpeed="500"
							collapsed="false" style="width: 40%;">
							<h:panelGrid columns="2" cellpadding="3">
								<h:outputLabel value="País:" />
								<p:selectOneMenu id="advanced" converter="paisConverter"
									value="#{salonBean.selectedPais}" effect="fade" var="p"
									filter="true" filterMatchMode="startsWith" style="">

									<f:selectItems var="pais" value="#{salonBean.listPaises}"
										itemLabel="#{pais.nombrePais}" itemValue="#{pais}" />
									<p:column>
										<h:outputText value="#{p.nombrePais}" />
									</p:column>
								</p:selectOneMenu>

								<h:outputLabel value="Provincia:" />
								<p:selectOneMenu id="selectProv" converter="provinciaConverter"
									value="#{salonBean.provinciaSelected}" effect="fade" var="pr"
									filter="true" filterMatchMode="startsWith"
									panelStyle="width:180px" style="width:160px">

									<f:selectItems var="prov" value="#{salonBean.listProvincia}"
										itemLabel="#{prov.nombreProvincia}" itemValue="#{prov}" />
									<p:column>
										<h:outputText value="#{pr.nombreProvincia}" />
									</p:column>
								</p:selectOneMenu>

								<h:outputLabel value="Localidad:" />
								<p:selectOneMenu id="selectLoc" converter="localidadConverter"
									value="#{salonBean.localidadSelected}" effect="fade" var="lo"
									filter="true" filterMatchMode="startsWith"
									panelStyle="width:180px" style="width:160px">

									<f:selectItems var="loc" value="#{salonBean.listLocalidad}"
										itemLabel="#{loc.nombreLocalidad}" itemValue="#{loc}" />
									<p:column>
										<h:outputText value="#{lo.nombreLocalidad}" />
									</p:column>
								</p:selectOneMenu>

								<h:outputLabel value="Barrio:" />
								<p:selectOneMenu id="selectBarrio" converter="barrioConverter"
									value="#{salonBean.domicilio.barrio}" effect="fade" var="ba"
									filter="true" filterMatchMode="startsWith"
									panelStyle="width:180px" style="width:160px">

									<f:selectItems var="bar" value="#{salonBean.listBarrio}"
										itemLabel="#{bar.nombreBarrio}" itemValue="#{bar}" />
									<p:column>
										<h:outputText value="#{ba.nombreBarrio}" />
									</p:column>
								</p:selectOneMenu>

								<h:outputLabel value="Calle:" />
								<p:inputText value="#{salonBean.domicilio.calle}"
									style="width:200px"></p:inputText>
								<h:outputLabel value="Número:" />
								<p:inputText value="#{salonBean.domicilio.numero}"
									style="width:100px"></p:inputText>
								<h:outputLabel value="Piso:" />
								<p:inputText value="#{salonBean.domicilio.piso}"
									style="width:100px"></p:inputText>

							</h:panelGrid>
						</p:fieldset>

						<p:fieldset legend="Teléfono" toggleable="true" toggleSpeed="500"
							collapsed="false" style="width: 40%;">
							<h:panelGrid columns="2" cellpadding="3">
								<h:outputLabel value="Fijo:" />
								<p:inputMask mask="(999) 999-9999"/>

								<h:outputLabel value="Móvil:" />
								<p:inputMask mask="(999) 999-9999"/>

								<h:outputLabel value="Otro:" />
								<p:inputMask mask="(999) 999-9999"/>
							</h:panelGrid>

						</p:fieldset>
					</h:panelGrid>

				</p:panel>
			</p:tab>

			<p:tab id="tipoEventos" title="Tipos de Eventos">
				<p:panel header="Tipos de Eventos">
					<p:messages />
					<h:outputLabel value="Tipo de Evento:" />

					<p:pickList id="PojoPickList" value="#{salonBean.tiposEventos}"
						var="tipoEvento" effect="bounce" itemValue="#{tipoEvento}"
						itemLabel="#{tipoEvento.nombreTipoEvento}"
						showSourceControls="false" showTargetControls="false"
						showSourceFilter="true" showTargetFilter="true"
						filterMatchMode="contains" converter="tipoeventoConverter">

						<p:ajax event="transfer" listener="#{salonBean.onTransfer}" />

						<p:column style="width:75%;">
							<h:outputText value="#{tipoEvento.nombreTipoEvento}" />
						</p:column>
					</p:pickList>

				</p:panel>
			</p:tab>

			<p:tab id="caracteristicas" title="Características">
				<p:panel header="Características">
					<h:panelGrid columns="2" cellpadding="3">
						<h:outputLabel value="Característica:" />

						<p:selectOneMenu id="comboCaract"
							converter="caracteristicaConverter"
							value="#{salonBean.caracteristicaSelected}" effect="fade" var="ca"
							filter="true" filterMatchMode="startsWith">

							<f:selectItems var="car" value="#{salonBean.listCaracteristicas}"
								itemLabel="#{car.nombreCaracteristica}" itemValue="#{car}" />
							<p:column>
								<h:outputText value="#{ca.nombreCaracteristica}" />
							</p:column>
						</p:selectOneMenu>
						<h:outputLabel value="Descripción:" />
						<p:inputTextarea value="#{salonBean.prueba}" required="false" />
					</h:panelGrid>

					<br />
					<h:outputLabel value="Fotos:" />
					<br />

					<p:fileUpload mode="advanced" dragDropSupport="true"
						label="Seleccionar" uploadLabel="Subir" cancelLabel="Cancelar"
						multiple="true" update="" sizeLimit="10000000"
						allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />


					<br />
					<p:commandButton value="Agregar" id="ajax" icon="ui-icon-disk"
						process="@this,caracteristicas" update="caractDT"
						action="#{salonBean.agregarCaracteristicaSeleccionada}" />
					<br />

					<p:separator id="separator2" />

					<p:dataTable id="caractDT" var="ca" value="#{salonBean.listCaracteristicasSeleccionadas}"
					selection="" rowKey="#{ca.nombreCaracteristica}" emptyMessage="Tabla vacía.">

						<p:column headerText="Característica">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="#{ca.nombreCaracteristica}" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="caractInput" value="#{ca.nombreCaracteristica}" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						

						<p:column headerText="Modificar"
							style="width:70px;text-align: center">
							<p:rowEditor />
						</p:column>
<!-- 
						<p:column style="width:70px;text-align: center"
							headerText="Eliminar">
							<p:commandButton update="" oncomplete="" icon="ui-icon-close"
								title="View">
								<f:setPropertyActionListener value="" target="" />
								<p:confirm header="Confirmation" message="Are you sure?"
									icon="ui-icon-alert" />
							</p:commandButton>

							<p:confirmDialog global="true" showEffect="fade"
								hideEffect="fade">
								<p:commandButton value="Yes" type="button"
									styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
								<p:commandButton value="No" type="button"
									styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
							</p:confirmDialog>

						</p:column>
 -->
					</p:dataTable>



				</p:panel>
			</p:tab>

			<p:tab id="disp" title="Disponibilidad">
				<p:panel header="Disponibilidad Inicial">
					<h:outputText
						value="Seleccione la Disponibilidad Inicial en el calendario." />
					<br />
					<br />
					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="align_top, align_top">
						<h:outputLabel value="Fecha Desde:" />
						<h:outputLabel value="Fecha Hasta:" />

						<p:calendar id="fechaDesde" mode="inline" navigator="true"
							locale="es" />
						<p:calendar id="fechaHasta" mode="inline" navigator="true"
							locale="es" />
					</h:panelGrid>
					<br />
				</p:panel>
			</p:tab>

				<p:tab id="confirm" title="Confirmación">
					<p:panel header="Confirmación">
			<!-- 
						<h:outputText value="Datos de Usuario" styleClass="letra" />
						<p:separator />
						<h:panelGrid columns="2" cellpadding="3">
							<h:outputText value="Usuario:" />
							<h:outputText value="Cesar_10" />
						</h:panelGrid>
						<br />
						<h:outputLabel value="Datos del Propietario" styleClass="letra" />
						<p:separator />
						<h:panelGrid columns="2" cellpadding="3">
							<h:outputLabel value="Tipo de Documento:" />
							<h:outputLabel value="DNI" />

							<h:outputLabel value="Número de Documento:" />
							<h:outputLabel value="30736574" />

							<h:outputLabel value="Apellido:" />
							<h:outputLabel value="Pinat" />

							<h:outputLabel value="Nombre:" />
							<h:outputLabel value="Cesar" />
						</h:panelGrid>
						<br />
						<h:outputLabel value="Datos de la Empresa" styleClass="letra" />
						<p:separator />
						<h:panelGrid columns="2" cellpadding="3">
							<h:outputLabel value="Razón Social:" />
							<h:outputLabel value="Pepito Lounge" />

							<h:outputLabel value="Email:" />
							<h:outputLabel value="pepito_Lounge@gmail.com" />

							<h:outputLabel value="Dirección:" />
							<h:outputLabel value="Colón 1234, Córdoba, Córdoba, Argentina" />

							<h:outputLabel value="Teléfonos:" />
							<p:dataList>
								<f:facet name="header">
								</f:facet>
							</p:dataList>
						</h:panelGrid>
						<p:separator />
						<br />
						<p:commandButton value="Guardar" icon="ui-icon-disk" />
				 -->
				 <p:commandButton value="Registrar"	 styleClass="ui-priority-primary" />
					</p:panel>
				</p:tab>
		</p:wizard>
	</h:form>

	<script type="text/javascript">
		PrimeFaces.locales["es"] = {
			closeText : "Cerrar",
			prevText : "Anterior",
			nextText : "Siguiente",
			monthNames : [ "Enero", "Febrero", "Marzo", "Abril", "Mayo",
					"Junio", "Julio", "Agosto", "Septiembre", "Octubre",
					"Noviembre", "Diciembre" ],
			monthNamesShort : [ "Ene", "Feb", "Mar", "Abr", "May", "Jun",
					"Jul", "Ago", "Sep", "Oct", "Nov", "Dic" ],
			dayNames : [ "Domingo", "Lunes", "Martes", "Miércoles", "Jueves",
					"Viernes", "Sábado" ],
			dayNamesShort : [ "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab" ],
			dayNamesMin : [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
			weekHeader : "Semana",
			firstDay : 0,
			isRTL : false,
			showMonthAfterYear : false,
			yearSuffix : "",
			timeOnlyTitle : "Solo hora",
			timeText : "Tiempo",
			hourText : "Hora",
			minuteText : "Minuto",
			secondText : "Segundo",
			currentText : "Fecha actual",
			ampm : false,
			month : "Mes",
			week : "Semana",
			day : "Día",
			allDayText : "Todo el día"
		};
	</script>
</body>
</html>
<!--  
	</ui:define>
</ui:composition>
-->
